<template>
  <div class="detail-survey">
    <div>
      <ul v-if="invest.length" class="event-list">
        <li v-for="item in invest" :key="item.id" @click="() => onListItemClick(item)">
          <p>调查网格编号：{{item['调查网格编号']}}</p>
          <p>调查方法：{{item['调查方法']}}</p>
          <p>
            <span>数量：{{item['定量样数量'] || 0}}&emsp;</span>
            <span>时间：{{item['采样日期']}} &emsp;</span>
            <span>网格：{{item['调查网格编号']}}&emsp;</span>
            <span>地址：{{item['小地名']}}</span>
          </p>
          <i class="el-icon el-icon-arrow-right" />
        </li>
      </ul>
      <el-empty v-else description="暂无调查事件数据"></el-empty>
    </div>


    <el-dialog
      title="调查信息"
      :visible.sync="dialogVisible"
      fullscreen
    >
      <SurveyDetail :event="activeEvent"/>
    </el-dialog>
  </div>
</template>

<script>
import SurveyDetail from './survey-detail'
export default {
  name: "PageSurvey",
  props: {
    detail: {
      type: Object,
      default: () => ({})
    },
    invest: {
      type: Array,
      default: () => []
    },
  },
  components: {
    SurveyDetail,
  },
  data() {
    return {
      dialogVisible: false,
      events: [
        {
          id: 1,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 2,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 3,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 4,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 5,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 6,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 7,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 8,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 9,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
        {
          id: 10,
          title: '2019本底调查-盐城射阳 (本底调查)',
          count: 3,
          date: '2019-01-01',
          grid: '64003700',
          address: '江苏省-盐城市-射阳县-新洋港黄沙港沿海区带8',
        },
      ],
      activeEvent: {},
    }
  },
  methods: {
    onListItemClick(item) {
      this.activeEvent = item
      this.dialogVisible = true
    },
  },
};
</script>

<style lang="scss">
.detail-survey{

  .event-list{
    list-style: none;
    & > li {
      position: relative;
      margin-bottom: 16px;
      padding: 10px 40px 10px 10px;
      border: 1px solid #ddd;
      .el-icon{
        position: absolute;
        top: 50%;
        right: 10px;
        color: #777;
        transform: translateY(-50%);
        font-size: 20px;
      }
      &:hover{
        cursor: pointer;
        background-color: #eee;
        .el-icon{
          color: var(--primary-color);
        }
      }

      & > p{
        line-height: 30px;
      }
    }
  }
}
</style>